
<template>
  <div class="pay-ment">
    <el-dialog
        title="Total"
        :visible.sync="chargeFreeTime"
        width="808px"
        :modal="false"
        :close-on-click-modal="false"
        :before-close="handlePayAdminClose">
      <div class="content">
        <div class="money"> {{ paymentData.total }} mins</div>

        <div class="pay-way">
          <div class="user-login" style=" padding: 0 18px 18px;border-bottom: 1px dashed #979797;margin-bottom: 18px">
            Member:<el-input v-model="memberCode"  autocomplete="new-accounts" placeholder="please input member info"></el-input></div>
        </div>

        <div class="pay-btn">
          <el-button @click="handlePayment">Payment</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {mapState} from "vuex";
import calculation from "../utils/calculation";
import { handleFreeTime, handleLogin} from "../api/shopMall";

export default {
  name: "freeVue",
  props: {
    chargeFreeTime: {
      type: Boolean,
      defaulted: false
    },
    paymentData: {
      type: Object,
      defaulted: {}
    }
  },
  computed: {
    ...mapState({couponData: state => state.coupons.couponList, comData: state => state.comData.comData,balance:state => state.coupons.balance})
  },
  data() {
    return {
      payWay: '6',
      coupon: '',
      couponList: [],
      total: 0,
      cash: 0,
      discountMoney: 0,
      memberCode: '',
      password: '',
      loginStatus: false,
      payMoney: '',
      memberId: '0',
      isManager:false,
      eatin:0
    }
  },
  mounted() {
    this.total = this.paymentData.total

  },
  methods: {
    handlePayAdminClose() {
      this.$emit('handlePayAdminClose')
    },
    myFilter(arr1, arr2) {
      let newData = []
      if (arr1 !== null) {
        arr1.forEach((ele) => {
          let list = ele.productId.split(':')
          list.forEach(item => {
            let id = item.split('-')[1]
            arr2.forEach(res => {
              if (id == res.categoryId) newData.push(ele)
            })
          })
        });
      }
      newData = this.deWeightThree(newData)
      return newData
    },
    deWeightThree(arr) {
      let map = new Map();
      for (let item of arr) {
        if (!map.has(item.id)) {
          map.set(item.id, item);
        }
      }
      return [...map.values()];
    },

    handlePayment() {
      if(!this.comData.isManager){
        this.$message({
          type:'error',
          message:'Permission denied'
        });
        return false
      }
      if(this.memberCode === ''){
        this.$message({
          type:'error',
          message:'请输入会员信息'
        });
        return false
      }
      if(this.paymentData.goodsList.length === 0){
        this.$message.error('请选择商品');
        return false
      }
      this.paymentFun()

    },

    paymentFun() {
      let data = this.comData
      data.goodsList = this.paymentData.goodsList
      data.member_id = this.memberId
      data.memberCode=this.memberCode
      data.payAmount = calculation.accMul(this.total, 60)
      handleFreeTime(JSON.stringify(data)).then(res => {
        if (res.data.code !== 0) {
          this.$emit('handlePayAdminClose')
          this.$store.dispatch('success/changeSuccess', res.data.msg)
          this.$store.dispatch('cart/clearCart')
        } else {
          this.$emit('handlePayAdminClose')
          this.$store.dispatch('error/changeError', res.data.msg)
          this.$store.dispatch('cart/clearCart')
        }
      })
    },

    handleVerify() {
      let newData = {
        "store_id": this.comData.store_id,
        pwd: this.password,
        memberCode: this.memberCode
      }
      handleLogin(newData).then(res => {
        if (res.data.code !== 0) {
          this.$message.success('验证成功');
          this.loginStatus = true
          this.memberId = res.data.member_id
          this.$store.dispatch('coupons/getCouponList', res.data)
          this.couponList = this.myFilter(res.data.couponList, this.paymentData.goodsList)
          this.couponList.unshift({id: '', name: 'NA'})
          this.balance = res.data.balance
        }else {
          this.$message({
            type:'error',
            message:res.data.msg
          });
        }
      })
    },

    handleCoupon(v) {
      if (v) {
        let productId = []
        let couponList = this.couponList.filter(item => {
          if (item.id === v) {
            let list = item.productId.split(':')
            list.forEach(v => {
              let id = v.split('-')[1]
              productId.push(id)
            })
          }
          return item.id === v
        })
        let num = calculation.accSub(100, couponList[0].discount)
        let discount = calculation.accDiv(num, 100)
        let goodList = this.paymentData.goodsList.filter(item => productId.filter(v => v == item.categoryId).length)
        let retailPrice = Math.max.apply(Math, goodList.map(ele => {
          return Number(ele.retailPrice)
        }))
        // let gid=0;

        for(let i=0;i<goodList.length;i++){
          if(goodList[i].retailPrice==retailPrice){
              goodList[i].couponuse=couponList[0].id;
            goodList[i].couponname=couponList[0].name;

            break;
          }
        }
        let discountMoney = calculation.accMul(retailPrice, discount)
        this.discountMoney = discountMoney
        this.total = calculation.accSub(this.paymentData.total, discountMoney)
      }
    }


  }
}
</script>

<style scoped lang="scss">
.pay-ment {
  ::v-deep .el-dialog {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 42px;

    .el-dialog__header {
      padding-bottom: 0;
    }

    .el-dialog__body {
      color: #ffffff;
      padding: 0 32px;


      .user-login .el-input {
        width: 30%;
        margin-right: 20px;
      }
      .bg {
        padding-bottom: 19px;
        border-bottom: 1px dashed #979797;
      }

      .money {
        font-size: 35px;
        padding: 11px 0;
      }

      .el-radio-group {
        width: 100%;

        .user {
          height: auto !important;
        }

        .el-radio {
          width: 100%;
          height: 54px;
          line-height: 54px;
          border: none;
          color: #ffffff;
          margin: 0;
          font-size: 22px;
          padding: 0 18px;
          border-bottom: 1px dashed #979797;

          .el-radio__label {
            width: calc(100% - 26px);
          }

          .el-radio__input, .el-radio__label {
            float: left;
            color: #ffffff;
          }
          .el-input.is-disabled .el-input__inner{
            color: #333333;
          }
          .el-radio__input.is-checked .el-radio__inner {
            border-color: #ffffff;
            background: #FC3C02;
          }

          .el-radio__input {
            margin-top: 16px;
          }

          .flex {
            display: flex;
            justify-content: space-between;
          }
        }
      }

      .coupon {
        position: relative;
        height: 58px;
        width: 100%;
        margin-bottom: 10px;

        .title {
          position: absolute;
          left: 10px;
          line-height: 58px;
          font-size: 18px;
        }

        .el-select {
          width: 100%;
          height: 100%;

          .el-input__inner {
            background: rgba(0, 0, 0, .1);
            border: none;
            text-align: right;
            height: 58px !important;
            line-height: 58px;
          }

          .el-select__tags {
            justify-content: flex-end;
          }
        }
      }

      .pay-btn {
        text-align: center;
        padding-bottom: 18px;
        padding-top: 20px;

        button {
          width: 252px;
          height: 67px;
          background: linear-gradient(257deg, #841FC3 0%, #FC3C02 100%);
          border-radius: 33px;
          border: none;
          color: #ffffff;
          font-size: 24px;
        }
      }
    }

  }
}

.eat-in{
  ::v-deep .el-radio{
    width: 50px !important;
    line-height: 30px!important;
    border: none!important;
    .el-radio__input{
      margin-top: 5px!important;
    }
  }
}
</style>
